import React, {Component} from 'react';
import { View, StyleSheet, Image, Text, TouchableOpacity, ViewPropTypes } from 'react-native';
import PropTypes from 'prop-types';

export default class MessagePageView extends Component{ 
    constructor(props) {
        super(props)
    }

    render(){
        return(
            <View style={[styles.container,this.props.style]}>
                <Image style={styles.image_style} source={this.props.imageSource} resizeMode='contain' />
                {this.props.titleText &&
                    <Text style={[styles.title_style, this.props.titleStyle ? this.props.titleStyle : null]}>{this.props.titleText}</Text>
                }
                {this.props.contentText &&
                    <Text style={[styles.text_style, { marginTop: this.props.titleText ? 15 : 6 }, this.props.contentStyle ? this.props.contentStyle : null]}>{this.props.contentText}</Text>
                }
                {this.props.buttonText &&
                    <TouchableOpacity activeOpacity={0.5} onPress={() => {
                        this.props.onPress && this.props.onPress();
                    }}>
                        <View style={[styles.button_style, this.props.buttonStyle ? this.props.buttonStyle : null]}>
                            <Text style={[styles.button_text, this.props.buttonTextStyle ? this.props.buttonTextStyle : null]}>{this.props.buttonText}</Text>
                        </View>
                    </TouchableOpacity>
                }
            </View>
        );
    } 
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column', 
        alignItems: 'center' 
    },
    image_style: {
        width: 101,
        height: 75,
        marginTop: 81
    },
    text_style: {
        fontSize: 15,
        color: "#666666",
        marginTop: 15,
        textAlign: 'center',
        marginLeft: 60,
        marginRight: 60,
        lineHeight: 24,
    },
    title_style: {
        color: '#333333',
        fontSize: 20,
        marginTop: 13
    },
    button_style: {
		height: 40,
		width: 240,
		justifyContent: 'center',
		alignItems: 'center',
		borderRadius: 20,
		borderColor: '#E83C36',
		borderWidth: 0.5,
		marginTop: 35
    },
    button_text: {
		fontSize: 16,
		color: '#E83C36'
	},
});

MessagePageView.propTypes = {
    style: ViewPropTypes.style,//样式
    imageSource: PropTypes.number.isRequired,//图片资源 如 require('@/images/linggeche/insurance_img.png')
    titleText: PropTypes.string,//标题 文字 如 报价中
    titleStyle: ViewPropTypes.style,//标题样式
    contentText: PropTypes.string,//内容文字  
    contentStyle: ViewPropTypes.style,//内容样式
    buttonText: PropTypes.string,//按钮文字
    buttonStyle: ViewPropTypes.style,//按钮样式
    buttonTextStyle: ViewPropTypes.style,//按钮文字样式
    onPress: PropTypes.func,//按钮点击回调
}